<template>
	<view class="mineLayout">
		<!-- 安全区域 -->
		<view class="" :style="{height: getStatusBarHeight() + 'px'}"></view>

		<!-- 头部我的信息 -->
		<view class="userInfo">
			<view class="xiaoxi" :style="{height: getNavBarHeight() + 'rpx'}">
				<view class="iconfont icon-xiaoxi" :style="{fontSize: getTitleBarHeight() + 'rpx'}"></view>
			</view>
			<view class="headInfo">
				<view class="left">
					<image class="headshot"
						:src="`https://pic.rmb.bdstatic.com/bjh/64d2c9691d61f4ce8380ee25d189ce76.jpeg@wm_2,t_55m+5a625Y+3L+WbvkhVSea1geiLjw==,fc_ffffff,ff_U2ltSGVp,sz_25,x_16,y_16`"
						mode="aspectFill"></image>
					<view class="content">
						<view class="basicInfo">
							<view class="nickName">
								麦芽麦芽
							</view>
							<view class="gender">
								<view class="iconfont icon-nvsheng"></view>
							</view>
						</view>
						<view class="address">
							成都信息工程大学_龙泉驿校区
						</view>
					</view>
				</view>
				<view class="right">
					<view class="realName">
						未实名
					</view>
					<view class="you">
						<view class="iconfont icon-you"></view>
					</view>
				</view>
			</view>

			<view class="bottomInfo">
				<view class="row" v-for="item in 4" :key="item">
					<view class="data">
						0
					</view>
					<view class="classify">
						圈子
					</view>
				</view>
			</view>
		</view>
	
	
		<!-- 功能区 -->
		<view class="footer">
			<scroll-view scroll-y="true" show-scrollbar="false" :enhanced="true" class="scroll-view">
				<view class="unlock">
					<image src="@/static/slices/icon_huiyuan.png" mode="scaleToFill"></image>
					<view class="content">
						<view class="title">
							邀请您成为圈友
						</view>
						<view class="text">
							解锁18项会员权益
						</view>
					</view>
					<view class="unlockBtn">
						立即解锁
					</view>
				</view>
				
				<view class="detailFun">
					<view class="title">
						常用功能
					</view>
					<view class="row">
						<image src="@/static/slices/icon_gongneng_shoucang.png" mode="scaleToFill"></image>
						<text class="text">
							我的兼职
						</text>
					</view>
					<view class="row">
						<image src="@/static/slices/icon_gongneng_dingdan.png" mode="scaleToFill"></image>
						<text class="text">
							我的订单
						</text>
					</view>
					<view class="row">
						<image src="@/static/slices/icon_gongneng_huodong.png" mode="scaleToFill"></image>
						<text class="text">
							我的活动
						</text>
					</view>
					<view class="row">
						<image src="@/static/slices/icon_gongneng_youhuiquan.png" mode="scaleToFill"></image>
						<text class="text">
							优惠券
						</text>
					</view>
					
				</view>
				<view class="detailTool">
					<view class="title">
						常用工具
					</view>
					<view class="row">
						<image src="@/static/slices/icon_gongju_daka.png" mode="scaleToFill"></image>
						<text class="text">
							签到打卡
						</text>
					</view>
					<view class="row">
						<image src="@/static/slices/icon_gongju_toupiao.png" mode="scaleToFill"></image>
						<text class="text">
							活动投票
						</text>
					</view>
					<view class="row">
						<image src="@/static/slices/icon_gongju_ceshi.png" mode="scaleToFill"></image>
						<text class="text">
							趣味测试
						</text>
					</view>
					<view class="row">
						<image src="@/static/slices/icon_gongju_youxi.png" mode="scaleToFill"></image>
						<text class="text">
							休闲游戏
						</text>
					</view>
				</view>
				
				<!-- 联盟 -->
				<view class="union">
					<view class="promotion">
						<view class="title">
							推广联盟
						</view>
						<text class="text">
							加入联盟永久获得高额奖金
						</text>
						<view class="iconfont icon-tuiguangguanli2"></view>
					</view>
					<view class="campus">
						<view class="title">
							校园CEO
						</view>
						<text class="text">
							平台赋能给资金，自主创业
						</text>
						<view class="icon-ceos">CEO</view>
					</view>
				</view>
				
				<!-- 公告 -->
				<swiper class="notice" autoplay interval="2000" circular vertical>
					<swiper-item>
						<image src="@/static/slices/icon-notice.png" mode="scaleToFill"></image>
						<view class="content">
							<view class="title">
								我要招人
							</view>
							<text class="text">
								招兼职，招实习，招全职
							</text>
						</view>
						<view class="btn">
							发布商品
						</view>
					</swiper-item>
					<swiper-item>
						<image src="@/static/slices/icon-notice.png" mode="scaleToFill"></image>
						<view class="content">
							<view class="title">
								我要招人
							</view>
							<text class="text">
								招兼职，招实习，招全职
							</text>
						</view>
						<view class="btn">
							发布商品
						</view>
					</swiper-item>
					<swiper-item>
						<image src="@/static/slices/icon-notice.png" mode="scaleToFill"></image>
						<view class="content">
							<view class="title">
								我要招人
							</view>
							<text class="text">
								招兼职，招实习，招全职
							</text>
						</view>
						<view class="btn">
							发布商品
						</view>
					</swiper-item>
				</swiper>
				<view class="otherlFun">
					<view class="title">
						其它功能
					</view>
					<view class="row">
						<view class="iconfont icon-tongzhi"></view>
						<text class="text">
							开启微信通知
						</text>
					</view>
					<view class="row">
						<view class="iconfont icon-anquan"></view>
						<text class="text">
							账号安全
						</text>
					</view>
					<view class="row">
						<view class="iconfont icon-guanyu"></view>
						<text class="text">
							关于平台
						</text>
					</view>
					<view class="row">
						<view class="iconfont icon-kefu"></view>
						<text class="text">
							官方客服
						</text>
					</view>
				</view>
				<view class="empty-area"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		getStatusBarHeight,
		getTitleBarHeight,
		getNavBarHeight
	} from "@/utils/system.js"
	
	import {onLoad} from "@dcloudio/uni-app"
	
</script>

<style lang="scss" scoped>
	.mineLayout {
		padding: 0 30rpx;
		font-size: 24rpx;
		height: 100%;
		background:
			linear-gradient(to bottom, transparent, #fff 500rpx),
			linear-gradient(to right, #bce0ec 60%, #c8e3ec);
		
		margin: auto;

		.userInfo {
			width: 100%;
			
			.xiaoxi {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			
			.headInfo{
				width: 100%;
				margin-top: 24rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				
				
				.left{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					margin-right: auto;
					&>image{
						width: 150rpx;
						height: 150rpx;
						border-radius: 150rpx;
						margin-right: 10rpx;
					}
					.content{
						.basicInfo{
							display: flex;
							align-items: center;
							flex-direction: row;
							line-height: 60rpx;
							.nickName{
								font-size: 36rpx;
								font-weight: 600;
								
								// overflow: hidden;
								// white-space: nowrap;//内容超出不换行
								// text-overflow: ellipsis;
							}
							.gender view{
								 font-size: 30rpx;
								 color: aqua;
							}
						}
						.address{
							font-size: 24rpx;
							color: $uni-text-color-grey;
						}
						
					}
					
				}
				
				.right{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
					.realName{
						background-color: #fef0cb;
						color: #edae13;
						padding: 10rpx 15rpx;
						margin-right: 10rpx;
						border-radius: 10rpx;
					}
					.you view{
						font-size: 30rpx;
					}
				}
			}
		
			.bottomInfo{
				margin: 24rpx 0 24rpx 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				.row{
					display: flex;
					flex-direction: column;
					align-items: center;
					.data{
						font-weight: 600;
					}
					.classify{
						color: $uni-text-color-grey;
					}
				}
			}
		}
		.footer{
			width: 100%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			.scroll-view{
				width: 100vw;
				height: 100vh;
				.unlock{
					margin: 0 30rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					padding: 24rpx;
					background-color: #fef1d9;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					&>image{
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}
					.content{
						margin-right: auto;
						.title{
							color: #ae7a45;
							font-weight: 600;
							font-size: 28rpx;
						}
						.text{
							color: $uni-text-color-grey;
						}
					}
					.unlockBtn{
						background-color: #fdcd81;
						padding: 10rpx 20rpx;
						border-radius: 40rpx;
						color: #8c4806;
					}
				}
			
				.detailFun,.detailTool,.otherlFun{
					margin: 0 30rpx;
					margin-top: 24rpx;
					background-color: #fff;
					// border: 2rpx solid rgba(0, 0, 0, 0.02);
					// border-right: 0;
					// border-left: 0;
					// box-shadow: 0 30rpx 30rpx 0 rgba(0, 0, 0, 0.02);
					border-radius: 20rpx;
					padding: 24rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-evenly;
					flex-wrap: wrap;
					.title{
						font-size: 32rpx;
						font-weight: 600;
						flex-basis: 100%;
						margin-bottom: 24rpx;
					}
					.row{
						display: flex;
						flex-direction: column;
						align-items: center;
						&>image{
							width: 88rpx;
							height: 88rpx;
						}
					}
				}
				// 联盟
				.union{
					margin: 0 30rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					gap: 24rpx;
					.promotion,.campus{
						position: relative;
						background:
							linear-gradient(to bottom, #eefaff 50%, #fff);
						background-size: cover;
						
						width: 50%;
						border-radius: 20rpx;
						padding: 24rpx;
						line-height: 50rpx;
						overflow: hidden;
						.title{
							font-size: 32rpx;
							font-weight: 600;
							flex-basis: 100%;
						}
						.text{
							color: $uni-text-color-grey;
						}
						.icon-tuiguangguanli2{
							font-size: 60rpx;
							position: absolute;
							bottom: 10rpx;
							right: 10rpx;
							transform: rotate(200deg);
							color: transparent;
							color: rgb(238, 250, 255) to rgb(255, 255, 255) ;
							background-image:
								linear-gradient(to left, #c2efff 10%, #fff);
							background-size: cover;
							-webkit-background-clip: text;
							background-clip: text;
						}
						.icon-ceos{
							font-size: 40rpx;
							position: absolute;
							bottom: 10rpx;
							right: 10rpx;
							transform: rotate(-20deg);
							color: transparent;
							font-weight: 800;
							background-image:
								linear-gradient(to bottom, #c2efff 10%, #fff);
							background-size: cover;
							-webkit-background-clip: text;
							background-clip: text;
						}
					}
				}
			
				.notice{
					margin: 0 30rpx;
					background:
						linear-gradient(to bottom, #f0f7ff 50%, transparent),
						linear-gradient(to right, #fff,  #f0f7ff 50%);
					border-radius: 20rpx;
					overflow: hidden;
					padding: 24rpx;
					height: 110rpx;
					swiper-item{
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						image{
							width: 46rpx;
							height: 38rpx;
							margin-right: 24rpx;
						}
						.content{
							margin-right: auto;
							.title{
								font-weight: 600;
								font-size: 28rpx;
							}
							.text{
								line-height: 40rpx;
								color: $uni-text-color-grey;
							}
						}
						.btn{
							padding: 16rpx 24rpx 16rpx 24rpx;
							font-size: 28rpx;
							font-weight: 800;
							color: #fff;
							border-radius: 60rpx;
							background-color: #06e7c5;
						}
					}
				}
			
				.otherlFun{
					margin: 0 30rpx;
					.iconfont{
						font-size: 60rpx;
						color: black;
						font-weight: 400;
					}
				}
				
				.empty-area{
					height: 600rpx;
					background-color: transparent;
				}
			}
		}
	}
</style>